<template>
  <div id="my-editor">
    <textarea ref="editor" />
  </div>
</template>

<script>
  import CodeMirror from 'codemirror';
  import 'codemirror/lib/codemirror.css';
  
  export default {
    mounted() {
      const editor0 = CodeMirror.fromTextArea(this.$refs.editor, {
        // CodeMirror 配置选项
        mode: "text/x-sql", // 设置编辑器的语言模式为 SQL
        theme: "material", // 设置编辑器的主题，可以选择其他主题如 "material"、"dracula" 等
        lineNumbers: true, // 显示行号
        tabSize: 2, // 设置制表符的宽度为 2 个空格
        indentWithTabs: false, // 使用空格而不是制表符进行缩进
        autofocus: true, // 自动聚焦到编辑器
        matchBrackets: true, // 高亮匹配的括号
        autoCloseBrackets: true, // 自动闭合括号
        // extraKeys: {
        //   "Ctrl-Space": "autocomplete", // 开启自动完成功能
        //   "Ctrl-Enter": runQuery, // 自定义快捷键，例如运行查询函数
        // },
      });

      var editor = CodeMirror(document.getElementById("my-editor"), {
        // 配置选项
        mode: "javascript", // 设置编辑器的语言模式为 SQL
        theme: "material", // 设置编辑器的主题，可以选择其他主题如 "material"、"dracula" 等
        lineNumbers: true, // 显示行号
        tabSize: 2, // 设置制表符的宽度为 2 个空格
        indentWithTabs: false, // 使用空格而不是制表符进行缩进
        autofocus: true, // 自动聚焦到编辑器
        matchBrackets: true, // 高亮匹配的括号
        autoCloseBrackets: true, // 自动闭合括号
      });

      // 可以将 editor 对象保存在 data 或使用其他方式进行访问
      this.editor = editor;
    },
  };
</script>